<template>
	<view class="orderDetail_box">
		<!-- 已完成 -->
		<view class="state_box" v-if="order.orderStatus=='FI'">
			<view class="top dis_fx">
				<view class="flex1">
					<view class="state">已完成</view>
					<view class="prompt">订单交易成功，期待您的下次出行！</view>
				</view>
				<view class="state_r text_right">
					<view class="price">￥{{order.totalPayAmount}}</view>
					<text>价格明细</text>
				</view>
			</view>
			<view class="bottom dis_fx fx_center">
				<view class="item item1 dis_fx fx_column" @click="toNewPage('/pages/customer/customer')"><image src="../../../static/zi%20xun_icon.png"></image><text>在线咨询</text></view>
				<view class="item item2 dis_fx fx_column"><image src="../../../static/dian%20hua_icon.png"></image><text>电话</text></view>
			</view>
		</view>
		<!-- 待支付 -->
		<view class="state_box" v-if="order.orderStatus=='TP'">
			<view class="top dis_fx">
				<view class="flex1">
					<view class="state state2">待支付</view>
				</view>
				<view class="state_r text_right">
					<view class="price">￥{{order.totalPayAmount}}</view>
					<text>价格明细</text>
				</view>
			</view>
			<view class="bottom dis_fx fx_center">
				<view class="item item1 dis_fx fx_column" @click="toNewPage('/pages/customer/customer')"><image src="../../../static/zi%20xun_icon.png"></image><text>在线咨询</text></view>
				<view class="item item2 dis_fx fx_column"><image src="../../../static/dian%20hua_icon.png"></image><text>电话</text></view>
			</view>
		</view>
		<!-- 拼团中 -->
		<view class="state_box" v-if="order.orderStatus=='TA'">
			<view class="top dis_fx">
				<view class="flex1">
					<view class="state state3">拼团中</view>
					<view class="prompt">差<text>{{order.actualQty-order.adultQty}}</text>人成团</view>
				</view>
				<view class="state_r text_right">
					<view class="price">￥{{order.totalPayAmount}}</view>
					<text>价格明细</text>
				</view>
			</view>
			<view class="bottom dis_fx fx_center">
				<view class="item item1 dis_fx fx_column" @click="toNewPage('/pages/customer/customer')"><image src="../../../static/zi%20xun_icon.png"></image><text>在线咨询</text></view>
				<view class="item item2 dis_fx fx_column"><image src="../../../static/dian%20hua_icon.png"></image><text>电话</text></view>
			</view>
		</view>
		<view class="addit_item">
			<view class="item">
				<view class="tit">产品信息</view>
				<view class="s_tit"><navigator @click="toNewPage('/pages/attractionsDetail/attractionsDetail?productId='+order.productId)" class="dis_fx fx_column"><text>{{order.product.productTypeName}}{{order.product.productName}}</text><view class="icon"></view></navigator></view>
				<view class="info">出行日期：{{order.tripBeginDate}} ~ {{order.tripEndDate}}</view>
				<view class="info">成人:{{order.productPrice}}元/人*{{order.adultQty}}人+儿童:{{order.productChildrenPrice}}元/人*{{order.childQty}}人+单房差:{{order.productSingleRoomDifference}}元+保险:{{order.insurancePrice}}元/人*{{order.adultQty+order.childQty}}人+会员费用:{{order.vipAmount}}元</view>
			</view>
			<view class="item" v-if="order.accompaniers.length>1">
				<view class="tit">出行人</view>
				<template v-for="(item,index) in order.accompaniers" v-if="item.type==1">
					<view class="s_tit"><text>出行人{{index}}：{{item.name}}   {{item.mobilePhone}}</text></view>
					<view class="info">证件号：{{item.idCard}}</view>
				</template>
			</view>
			<view class="item" v-if="order.domesticTourOperatorInfo">
				<view class="tit">地接信息</view>
				<view class="s_tit"><text>联系人：{{order.domesticTourOperatorInfo.contact}}   {{order.domesticTourOperatorInfo.contactMobilePhone}}</text></view>
				<view class="info">导游/司机：{{order.domesticTourOperatorInfo.tourGuide}}  {{order.domesticTourOperatorInfo.tourGuideMobilePhone}}</view>
				<view class="info">集合地点：{{order.domesticTourOperatorInfo.setLocation}}</view>
				<view class="info">备注：</view>
			</view>
		</view>
		<!-- 待支付按钮 -->
		<button class="pub_btn" v-if="order.orderStatus=='TP'">去支付</button>
		<!-- 拼团中按钮 -->
		<button class="pub_btn" v-if="order.orderStatus=='TA'">邀请好友一同出行</button>
	</view>
</template>

<script>
	import util from '../../../common/util.js'
	export default {
		data() {
			return {
				orderId:'',
				order:null
			}
		},
		onLoad(options){
			var orderId=options.orderId;
			this.orderId=orderId;
		},
		onShow() {
			this.getOrder();
		},
		methods: {
			//获取订单信息
			getOrder(){
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var that=this;
				var params={
					orderId:that.orderId
				}
				util.fetchGet('/order/view/'+that.orderId,params,function(res){
					let order=res.data
					order.tripBeginDate=util.formatDate(new Date(order.tripBeginDate),"yyyy-MM-dd");
					order.tripEndDate=util.formatDate(new Date(order.tripEndDate),"yyyy-MM-dd");
					that.order=order
					uni.hideLoading();
				},function(){},false)
			},
			//打电话
			makeCall(phoneNum){
				uni.makePhoneCall({
					phoneNumber: phoneNum //仅为示例
				});
			},
			toNewPage(url){
				uni.navigateTo({url})
			}
		}
	}
</script>

<style>
	.pub_btn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #FFC800;
		color: #333333;
		font-size: 36upx;
		line-height: 100upx;
		text-align: center;
		border-radius: 0;
	}
	.pub_btn::after{
		border: 0 none;
	}
	.orderDetail_box{
		padding: 24upx 24upx 150upx;
	}
	.orderDetail_box .state_box{
		box-shadow: 0 0 18upx 0 rgba(106, 79, 13, 0.12);
		border-radius: 10upx;
		padding: 24upx 24upx 70upx;
	}
	.orderDetail_box .state_box .state{
		color: #333333;
		font-size: 48upx;
		font-weight: 600;
	}
	.orderDetail_box .state_box .state.state2{
		color: #FC5C1D
	}
	.orderDetail_box .state_box .state.state3{
		color: #333333
	}
	.orderDetail_box .state_box .prompt{
		color: #999999;
		font-size: 28upx;
	}
	.orderDetail_box .state_box .prompt text{
		color: #FC5C1D;
	}
	.orderDetail_box .state_box .price{
		color: #FFC800;
		font-size: 32upx;
		margin-top: 10upx;
	}
	.orderDetail_box .state_box .state_r text{
		color: #999999;
		font-size: 24upx;
	}
	.orderDetail_box .bottom{
		margin-top: 100upx;
	}
	.orderDetail_box .bottom .item{
		margin: 0 80upx;
	}
	.orderDetail_box .bottom .item.item1 image{
		width: 40upx;
		height: 38upx;
	} 
	.orderDetail_box .bottom .item.item2 image{
		width: 32upx;
		height: 40upx;
	} 
	.orderDetail_box .bottom .item text{
		font-size: 32upx;
		color: #333333;
		margin-left: 30upx;
	}
	.orderDetail_box .addit_item{
		line-height: 2;
	}
	.orderDetail_box .addit_item .tit{
		color: #333333;
		font-size: 32upx;
		margin: 30upx 0 10upx;
		font-weight: 600;
	}
	.orderDetail_box .addit_item .s_tit .icon{
		background: url() no-repeat center/contain;
		width: 13upx;
		height: 28upx;
		margin-left: 20upx;
	}
	.orderDetail_box .addit_item .s_tit{
		font-size: 28upx;
		color: #333333;
	}
	.orderDetail_box .addit_item .info{
		font-size: 28upx;
		color: #999999;
	}
</style>
